<!--
 作者：ex_wangshuai
 日期：2016-10-08
 功能：热门品牌，明星店铺，爆款新品的链接模块
 参数：
 事件：
-->
<template>
  <div class="monitor">
    <p class="title">
      ·&nbsp;&nbsp;{{title}}&nbsp;&nbsp;·
    </p>
    <ul>
      <li v-for="icon in iconList" track-by="id">
        <a v-link="{ path: icon.url}" replace>
          <img :src="icon.img"/>
          <p class="name">{{icon.name}}</p>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
  export default{
    data () {
      var data = {}
      data.title = '观热点'
      data.iconList = [
        { 'id': 0, 'name': '热门品牌', 'img': './static/img/logo-brand.png', 'url': 'brand' },
        { 'id': 1, 'name': '明星店铺', 'img': './static/img/logo-store.png', 'url': 'store' },
        { 'id': 2, 'name': '爆款新品', 'img': './static/img/logo-product.png', 'url': 'product' }
      ]
      return data
    }
  }
</script>

<style lang="scss" scoped>
  $padding: .2rem;
  $iconWidth: 2.3rem;

  div.monitor{
    /*position: relative;*/
    height: 3.54rem;
    box-sizing: border-box;
    width:100%;

    p.title{
      width: 100%;
      padding-top: 0.36rem;
      text-align: center;
      font-size: .28rem;
    }

    ul{
      padding: 0;
      margin: 0;


      li{
        float: left;
        width: 33.3333%;
        list-style: none;
        margin-top: 0.4rem;

        a{
          text-align: center;
          text-decoration: none;
          font-size: .28rem;
          width:100%;

          img{
            height: 1.4rem;
            display: block;
            margin:auto;
          }

          p.name{
            width: 100%;
            color:black;
            text-align: center;
            margin-top: 1.8vh;
          }
        }
      }

      li:nth-child(odd){
        a{
          float: left;
        }
      }

      li:nth-child(even){
        a{
          float: right;
        }
      }
    }

    ul:after,ul:before{
      display: table;content: " ";
    }

    ul:after{
      clear:both;
    }
  }
</style>
